<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>{{ title | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
    <form (ngSubmit)="submitPassword($event)" #passwordForm>
        <div>
            <ion-item>
                <ion-input [ariaLabel]="placeholder | translate" class="ion-text-wrap core-ioninput-password" name="password"
                    type="password" placeholder="{{ placeholder | translate }}" [(ngModel)]="password" core-auto-focus
                    [clearOnEdit]="false">
                    <ion-input-password-toggle slot="end" showIcon="fas-eye" hideIcon="fas-eye-slash" />
                </ion-input>
            </ion-item>
            @if (error) {
                <ion-item class="ion-text-wrap ion-padding-top text-danger">
                    <core-format-text [text]="error | translate" />
                </ion-item>
            }
        </div>
        <ion-button expand="block" type="submit" [disabled]="!password">
            {{ submit | translate }}
        </ion-button>
        <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
        <input type="submit" class="core-submit-hidden-enter" />
    </form>
</ion-content>
